<template>
    <a-layout class="content">
        <a-row>
            <a-col :xs="{ span: 20, offset: 2 }" :md="{ span: 10, offset: 7 }" class="search">

                <div class="articleClass" v-for="c in classification">
                    <h2>{{ c.classContent }}</h2>

                    <div class="artList">
                        <ol>
                            <li v-for="a in c.list">
                                <a @click="showDetails(a.articleId)">
                                    {{ a.articleTitle }}
                                </a>
                                <span class="date">{{ fmt(a.articleDate) }}</span>
                            </li>
                        </ol>
                    </div>

                </div>

            </a-col>
        </a-row>
        <a-back-top />
    </a-layout>
</template>

<script>
    import { requestClassAndArticle } from "../../network/request";

    export default {
        name: "Classification",
        data(){
            return {
                classification: {}
            };
        },
        created() {
            //获取分类和文章
            requestClassAndArticle().then(req => {
                this.classification = req;
            })
        },
        methods: {
            fmt(d) {
                return this.$moment(d).format('YYYY-MM-DD');
            },
            showDetails(id) {
                this.$router.push({
                    path: '/details',
                    query: { id }
                })
            }
        }
    }
</script>

<style scoped>
    h2 {
        padding-top: 15px;
        color: var(--my-cyan);
    }
    li {
        padding-top: 4px;
    }
    li span {
        padding-left: 10px;
        color: var(--my-cyan);
    }
</style>